<template>
    <div class="TitleText">
        <div
            class="TitleText-title"
            :style="titleTextStyle['position']"
        >
            <span
                class="TitleText-title-text"
                :style="titleTextStyle['title-size']"
            >
                {{ formState?.title }}
            </span>
            <span
                class="TitleText-title-desc"
                :style="titleTextStyle['desc-size']"
            >
                {{ formState?.desc }}
            </span>
        </div>
    </div>
</template>

<script setup>
import {
  computed,
  reactive,
  toRefs,
  watch,
} from 'vue';

const props = defineProps({ 
    comItem: {
        type: Object,
        required: true,
    },
    selectedComSchema: {
        type: Object,
        required: true,
    },
});
const { comItem, selectedComSchema } = toRefs(props);

const titleTextStyle = computed(() => {
    let result = {};
    if (comItem.name === "TitleText") {
        comItem?.config.forEach((domItem) => {
        if (domItem.config) {
          result[domItem.format] = domItem.config.style;
        }
      });
    }
    return result;
});
const state = reactive({
    formState: selectedComSchema.value.formState
});

const { formState } = toRefs(state);

watch(() => selectedComSchema.value, ({ formState }) => {
    console.log('selectedComSchema------', formState);
    state.formState = formState;
}, {
    deep: true
});
console.log(comItem);
</script>

<style lang="less" scoped>
.TitleText{
    padding: 12px 16px;
    &-title{
        display: flex;
        flex-direction: column;
        justify-content: start;
        &-text{
            font-weight: bold;
        }
        &-desc{
            margin-top: 8px;
        }
    }
}
</style>